<template>
  <!-- 面包屑 -->
  <div class="bread">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/ums/admin' }">权限</el-breadcrumb-item>
      <el-breadcrumb-item>分配资源</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <el-card class="box-card">
    <div>
      <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange1">商品模块</el-checkbox>
    </div>
    <div>
      <el-checkbox-group v-model="checkedCities1" @change="handleCheckedCitiesChange1">
        <el-checkbox v-for="city in cities1" :key="city" :label="city">{{
          city
        }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div>
      <el-checkbox v-model="form.checkAll1" :indeterminate="isIndeterminate"
        @change="handleCheckAllChange2">订单模块</el-checkbox>
    </div>
    <div>
      <el-checkbox-group v-model="checkedCities2" @change="handleCheckedCitiesChange2">
        <el-checkbox v-for="city in cities2" :key="city" :label="city">{{
          city
        }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div>
      <el-checkbox v-model="form.checkAll2" :indeterminate="isIndeterminate"
        @change="handleCheckAllChange3">营销模块</el-checkbox>
    </div>
    <div>
      <el-checkbox-group v-model="checkedCities3" @change="handleCheckedCitiesChange3">
        <el-checkbox v-for="city in cities3" :key="city" :label="city">{{
          city
        }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div>
      <el-checkbox v-model="form.checkAll3" :indeterminate="isIndeterminate"
        @change="handleCheckAllChange4">权限模块</el-checkbox>
    </div>
    <div>
      <el-checkbox-group v-model="checkedCities4" @change="handleCheckedCitiesChange4">
        <el-checkbox v-for="city in cities4" :key="city" :label="city">{{
          city
        }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div>
      <el-checkbox v-model="form.checkAll4" :indeterminate="isIndeterminate"
        @change="handleCheckAllChange5">内容模块</el-checkbox>
    </div>
    <div>
      <el-checkbox-group v-model="checkedCities5" @change="handleCheckedCitiesChange5">
        <el-checkbox v-for="city in cities5" :key="city" :label="city">{{
          city
        }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div>
      <el-checkbox v-model="form.checkAll5" :indeterminate="isIndeterminate"
        @change="handleCheckAllChange5">其他模块</el-checkbox>
    </div>
    <div>
    </div>
    <div style="margin: 0 40%;">
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>清空</el-button>
      </el-form-item>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { } from "vue";
import { ref } from 'vue'
let form = ref({
  checkAll1: false,
  checkAll2: false,
  checkAll3: false,
  checkAll4: false,
  checkAll5: false,

})
let checkedCities1 = ref([])
let checkedCities2 = ref([])
let checkedCities3 = ref([])
let checkedCities4 = ref([])
let checkedCities5 = ref([])
const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['Shanghai', 'Beijing'])
const cities1 = ["商品品牌管理", "商品属性管理", "商品分类管理", "商品管理", "商品库存管理"]
const cities2 = ["订单管理", "订单退货申请管理", "退货原因管理", "订单设置管理", "收货地址管理"]
const cities3 = ["优惠券管理", "优惠券领取记录管理", "限时购活动管理", "限时购商品关系管理", "限时购场次管理", "首页轮播广告管理", "首页品牌管理", "首页新品管理", "首页人气推荐管理", "首页专题推荐管理"]
const cities4 = ["后台用管理", "后台用户角色管理", "后台菜单管理", "后台资源分类管理", "后台资源管理"]
const cities5 = ["商品优选管理", "商品专题管理"]

const handleCheckAllChange1 = (val: boolean) => {
  checkedCities1.value = val ? cities1 : []
  isIndeterminate.value = false
}
const handleCheckAllChange2 = (val: boolean) => {
  checkedCities2.value = val ? cities2 : []
  isIndeterminate.value = false
}
const handleCheckAllChange3 = (val: boolean) => {
  checkedCities3.value = val ? cities3 : []
  isIndeterminate.value = false
}
const handleCheckAllChange4 = (val: boolean) => {
  checkedCities4.value = val ? cities4 : []
  isIndeterminate.value = false
}
const handleCheckAllChange5 = (val: boolean) => {
  checkedCities5.value = val ? cities5 : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange1 = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities1.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities1.length
}
const handleCheckedCitiesChange2 = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities2.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities2.length
}
const handleCheckedCitiesChange3 = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities3.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities3.length
}
const handleCheckedCitiesChange4 = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities4.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities4.length
}
const handleCheckedCitiesChange5 = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities5.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities5.length
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 1227px;
  margin: 20px auto;
}
</style>
